<template>
    <div class='portlet light bordered'>
        <div class='portlet-title'>
            <div class='caption'>
                <span class='caption-subject bold uppercase font-dark'>通行证区域人数统计（人）</span>
            </div>
        </div>
        <div class='portlet-body'>
            <div id='mapdiv' style='width: 100%; height: 400px;'></div>
        </div>
    </div>
</template>

<script>

import AmCharts from 'ammap3/ammap/ammap.js';
import 'assets/chinaLow.js';
import 'ammap3/ammap/themes/light.js';

export default {
    mounted() {
        this.initMap();
    },
    methods: {

        // 初始化地图
        initMap() {
            this.$DashboardService.StatPassportByRegion()
                .then(ret => {
                    var map = window.AmCharts.makeChart("mapdiv", {
                        "type": "map",
                        "theme": "light",
                        "dragMap": false,
                        "colorSteps": 10,
                        "zoomControl": {
		                    "zoomControlEnabled": false
	                    },
                        "dataProvider": {
                            "map": "chinaLow",
                            "areas": ret
                        },
                        "areasSettings": {
                            "autoZoom": true,
                            "balloonText": "[[title]]: <strong>[[value]]</strong> 人"
                        },
                        "valueLegend": {
                            "right": 10,
                            "minValue": "0",
                            "maxValue": "50"
                        }
                    });
                });
        }
    }
}
</script>

<style>

</style>
